<!-- 发起活动 -->
<template>
	<view class="publishTab">
		<!-- 地图,如果没登录就会跳转登录页，但是map渲染到一半会报错，所以要设置个条件渲染 -->
		<view class="publish-map" v-if="loginStatus">
			<PublishMap :data="mapData" @submit="mapClick"></PublishMap>
		</view>

		<!-- 表单输入 -->
		<view class="publish-form">
			<PublishForm ref="publishForm" @submit="formSubmit"></PublishForm>
		</view>

		<!-- 折叠面板 -->
		<view class="collapse">
			<uni-collapse>

				<!-- 约玩项目 -->
				<uni-collapse-item :open="true" :title="'约玩项目:'+ project.title"
					thumb="/static/images/icon-item.png">
					<view class="publish-project">
						<PublishProject :data="projectListData" @submit="projectSubmit"></PublishProject>
					</view>
				</uni-collapse-item>
				
				<!-- 约玩时长 -->
				<uni-collapse-item :open="true" :title="'约玩时长:'+ projectTime.name"
					thumb="/static/images/icon-time.png">
					<view class="publish-project">
						<PublishDuration :project="project" @submit="durationSubmit"></PublishDuration>
					</view>
				</uni-collapse-item>

				<!-- 约玩时间 -->
				<uni-collapse-item :open="true" :title="'约玩时间:'+ pageData.startTime"
					thumb="/static/images/icon-time.png">
					<view class="publish-time">
						<PublishTime @submit="timeSubmit"></PublishTime>
					</view>
				</uni-collapse-item>

				<!-- 佣金 -->
				<uni-collapse-item :open="true" :title="moneyShow"
					thumb="/static/images/icon-commission.png">
					<view class="publish-time">
						<PublishBrokerage :project="project" :data="pageData" @submit="brokerageSbumit"></PublishBrokerage>
					</view>
				</uni-collapse-item>

			</uni-collapse>
		</view>


		<!-- 提交订单 -->
		<view class="publish-submit">
			<PublishSubmit :data="pageData" :project="project" @setPageData="setPageData"></PublishSubmit>
		</view>


	</view>
</template>

<script>
	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	
	// 页面组件
	import PublishMap from './components/publish-map.vue'
	import PublishForm from './components/publish-form.vue'
	import PublishProject from './components/publish-project.vue'
	import PublishDuration from './components/publish-duration.vue'
	
	import PublishTime from './components/publish-time.vue'
	import PublishBrokerage from './components/publish-brokerage.vue'
	import PublishSubmit from './components/publish-submit.vue'

	// api请求
	import {
		getCateApi // 获取艺人分类
	} from '@/api/artist.js'

	export default {
		components: {
			PublishMap, // 地图
			PublishForm, // 表单
			PublishProject, // 约玩项目
			PublishDuration, // 约玩时长
			PublishTime, // 约玩时间
			PublishBrokerage, // 佣金
			PublishSubmit, // 提交订单
		},
		data() {
			return {
				// 艺人分类数据
				classifyData: [],
				
				pageData: {
					// cityCode: '', // 城市代码
					phoneCode: '', // 电话区号
					address: '', // 具体地址
					latitude: '', //维度
					longitude: '',// 经度
					
					quota: '', // 限定人数
					gender: '', // 性别
					contact: '', // 联系人
					phone: '', // 电话
					remark: '', // 备注
					

					
					type: '', // 活动类型
					duration: '', // 持续时间
					startTime: '', // 开始时间
					commissionAmount: '', // 佣金金额



					payType: '', // 支付方式
					
				},
				
				// 约玩项目
				project: {}, 
				
				// 约玩时长
				projectTime: {}, 
				
				// 地图数据
				mapData: {},

				// 项目List数据
				projectListData: [],
				
			};
		},
		computed:{
			...mapGetters([ 'isLogin','userInfo']),
			
			// 佣金推荐显示文字
			moneyShow(){
				// 项目推荐金额
				let money1 = this.project.activityPrice
				
				// 时长
				let money2 = this.projectTime.value
				
				
				return `佣金(建议￥${money1 * money2}-${money1 * money2 * 2}元/人): ${money1 * money2}￥`
			},
			
			/**
			 * 是否登录
			 */
			loginStatus(){
				let str = false
				if(this.userInfo?.loginToken){
					str = true
				}
				
				return str;
			}
		},

		created() {
 			

		},
		mounted() {
			
			// 如果没登录
			if(!this.loginStatus){
				uni.switchTab({
					url: '/pages/myTab/index'
				})
				this.setTabCurrent(4)
				return
			}
			
			
			this.init()
		},

		methods: {
			...mapActions('home',['getCate']),
			...mapMutations(['setTabCurrent']),
			
			/**
			 * 初始化
			 */
			async init() {
				this.projectListData = await this.getCate() // 获取艺人分类
			},

			/**
			 * 数据输入框数据
			 */
			formSubmit(val) {
				let val2 = val.map(res => ([res.title,res.value]))
				// console.log(val2, '输入框吗');
				
				let obj = {}
				val.map(res => {
					// 地址
					switch (res.title){
						case '地址' : {
							
							// 设置地图的数据
							if(res.value !== ''){
								this.mapData = res.value
							}
							
							// 提交表单数据中的 经纬度和code
							for(let key in res.value){
								if(key !== 'title' && key !== 'address'){
									obj[key] = res.value[key]
									
									console.log('kk',res.value[key]);
								}
							}
							
							obj['address'] = res.value.title + '·'+ res.value.address
						};
						break;
						
						case '所需人数' : {
							obj['quota'] = Number(res.value)
						};
						break;
						
						case '性别' : {
							obj['gender'] = Number(res.value)
						};
						break;
						
						case '联系人' : {
							obj['contact'] = res.value
						};
						break;
						
						case '联系电话' : {
							obj['phone'] = String(res.value)
						};
						break;
						
						case '备注' : {
							obj['remark'] = res.value
						};
						break;

						
					}
					
					
				})
				
				Object.assign(this.pageData,obj)
			},

			/**
			 * 选择后的项目数据
			 */
			projectSubmit(val) {
				this.project = val
				this.pageData.type = val.id
			},
			
			/**
			 * 选择的时长
			 */
			durationSubmit(val){
				console.log(val, '越玩儿时间');
				this.projectTime = val
				this.pageData.duration = val.value
			},
			
			/**
			 * 选择的日期时间数据
			 */
			timeSubmit(val){
				this.pageData.startTime = val + ':00'
			},
			
			/**
			 * 输入的每人多少佣金
			 */
			brokerageSbumit(val){
				this.pageData.commissionAmount = Number(val)
			},
			
			/**
			 * 修改pageData
			 */
			setPageData(val){
				this.pageData = val
				
				console.log('修改pageData',this.pageData);
			},
			
			
			/**
			 * 点击地图
			 */
			mapClick(){
				this.$refs.publishForm.$refs.chooseAddress[0].chooseAddressView()
			}
			
		}

	}
</script>

<style lang="less" scoped>

	// 折叠面板
	/deep/ .uni-collapse {
		border-radius: 24rpx !important;
	}

	/deep/ .uni-collapse-item__title.uni-collapse-item-border {
		background-color: #fff;
		border-radius: 24rpx !important;
		overflow: hidden !important;
		position: static;
		z-index: 1000;
	}

	/deep/ .uni-collapse-item__wrap.is--transition {
		margin-top: -36rpx;
		border-radius: 24rpx;
		position: static;
		z-index: 100
	}
	/deep/ .uni-collapse-item{
		margin-bottom: 24rpx !important;
	}

	.publishTab {
		#padding(0 0 48rpx 0);
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, .2) 100%);

		// 地图
		.publish-map {}

		// 表单输入
		.publish-form {
			margin: 24rpx;
		}

		.collapse {
			margin: 24rpx 24rpx 72rpx 24rpx;
		}

		// 约玩项目
		.publish-project {}

		.publish-submit {
			margin: 24rpx;
		}

	}
</style>
<!-- #ifdef MP-WEIXIN -->
<style>
	page{
		background: none;
	}
</style>
<!-- #endif -->